<template>
  <div
    style="position: absolute;background-color: #fff;padding-top:44px;overflow: hidden;width: 100%;height: 100%;"
  >
    <div style="position: absolute;top:10px;left: 10px;right: 10px;">
      <TextBox
        style="width:100%;"
        iconCls="icon-search"
        placeholder="请输入部门名称"
        @valueChange="searchNodes($event.currentValue)"
      ></TextBox>
    </div>

    <div :style="treeStyle">
      <div class="areaTree">
        <ul :id="treeId" class="ztree otherStyle"></ul>
      </div>
    </div>
  </div>
</template>

<script>
import treeApi from "@/api/tree";

export default {
  // name: "deptTree",
  props: {
    checkbox: Boolean,
    onZTreeClick: Function,
    onZTreeCheck: Function,
    treeHeight: String,
    treeId: String
  },
  data() {
    return {
      selected: null,
      checked: "",
      treeStyle: {
        overflow: "hidden",
        border: "0",
        borderTopWidth: "1px",
        borderStyle: "solid",
        borderColor: "#BDC3C7",
        height: "100%"
      },
      setting: {
        data: {
          simpleData: {
            enable: true,
            idKey: "id"
          }
        },
        callback: {
          onClick: this.onTreeClick,
          onCheck: this.onTreeCheck
        },
        check: {
          enable: true,
          chkboxType: { Y: "s", N: "ps" }
        },
        view: {
          showLine: true,
          showTitle: true,
          showIcon: true
        }
      },
      zNodes: [
        {
          id: 1,
          name: "父节点1",
          children: [
            { id: 2, name: "子节点1", checked: true, isParent: false },
            { id: 3, name: "子节点2", title: "abc" }
          ]
        }
      ]
    };
  },
  beforeMount() {
    // console.log("depttree-treeid--------" + this.treeId);
    // console.log(this.treeStyle.height);
  },
  async mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      var response = await treeApi.findDepList();
      if (response.success) {
        this.zNodes = response.result;
        /* eslint-disable */
        $.fn.zTree.init($("#"+this.treeId), this.setting, this.zNodes);
      } else {
        alert(response.message);
      }
    },
    onTreeClick(event, treeId, treeNode) {
      if (this.onZTreeClick) {
        this.onZTreeClick(treeNode);
      }
    },
    onTreeCheck(event, treeId, treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj(this.treeId);
        var nodes = treeObj.getCheckedNodes(true);
        if (this.onZTreeCheck) {
            this.onZTreeCheck(nodes);
        }
    },
    onCheck(nodes) {
      const deptSerial = nodes.map(item => {
        return item.key;
      });
      this.checked = deptSerial;
      //check 没有选中复选框事件，这里就不回调方法了
    },
    getCheckedNodeIdString() {
        var treeObj = $.fn.zTree.getZTreeObj(this.treeId);
        // console.log(treeObj.getCheckedNodes(true));
        // var nodes = treeObj.transformToArray(treeObj.getCheckedNodes(true));
        // console.log(treeObj.transformToArray(treeObj.getCheckedNodes(true)));
        // console.log(treeObj.transformTozTreeNodes(treeObj.getCheckedNodes(true)));
        var nodes = treeObj.getCheckedNodes(true);
        var dept = "";
        nodes.forEach((node, index, array) => {
          return (dept += node.id + ",");
        });
        // console.log(dept.substring(0, dept.length - 1));
        return dept.substring(0, dept.length - 1);
    },
    searchNodes(value) {
      // var treeObj = $.fn.zTree.getZTreeObj("deptTree");
      // var nodes = treeObj.getNodesByParamFuzzy("name", value, null);
      // console.log(nodes);

      function filter(node) {
        // console.log(node.name);
        return node.name.indexOf(value) > -1;
      }

      var treeObj = $.fn.zTree.getZTreeObj(this.treeId);
      // var node = treeObj.getNodesByFilter(filter, true); // 仅查找一个节点
      var nodes = treeObj.getNodesByFilter(filter, false); // 查找节点集合
      // console.log(nodes);
      $.fn.zTree.init($("#"+this.treeId), this.setting, nodes);
    }
  }
};
</script>

<style>
@import "../../plugins/zTree/css/zTreeStyle/zTreeStyle.css";
.areaTree {
  overflow: auto;
  height: 100%;
}
.otherStyle{
  display: table
}

.box-title {
  border-radius: 3px 3px 0 0;
  background-color: #f5f5f5;
}
.box-title a {
  color: #2fa4e7;
  text-decoration: none;
  font-size: 14px;
  display: block;
  padding: 8px 15px;
  cursor: pointer;
}
.box-title .fa {
  float: right;
  line-height: 20px;
}
</style>
